<template>
  <div id="friend">
    <van-nav-bar left-arrow @click-left="back"  @click-right="clickRight">
      <template #right>
        <van-icon name="ellipsis" size="18" />
      </template>
    </van-nav-bar>

      <van-row gutter="20">
        <van-col span="6" @click="showImg(friendDetail.headImg)">
          <img :src="friendDetail.headImg" alt />
        </van-col>
        <van-col span="14" class="font_size">
          <h4 style="margin: 5px 0;">{{ friendDetail.nickname}}</h4>
          <p>昵&nbsp;&nbsp;&nbsp;称：{{friendDetail.nickname}}</p>
          <p>微信号：</p>
          <p>地&nbsp;&nbsp;&nbsp;区：{{friendDetail.addressCity}}</p>
        </van-col>
      </van-row>
      <br>
      <van-cell-group>
        <van-cell to="/friendDetail/beizhu" title="设置备注和标签" is-link></van-cell>
        <van-cell to="/friendDetail/friendPermiss" title="朋友权限 " is-link></van-cell>
      </van-cell-group>
      <br>
      <van-cell-group>
        <van-cell title="朋友圈" is-link></van-cell>
        <van-cell to="/friendDetail/infomore" title="更多信息" is-link></van-cell>
      </van-cell-group>
      <br>
      <van-button icon="wechat" block @click="communication">发消息</van-button>
      <van-button icon="video" block>音视频通话</van-button>
  </div>
</template>

<script>
import { ImagePreview } from 'vant';


export default {
  data() {
    return {
      id: JSON.parse(localStorage.getItem('friendDetail')).id,
      friendDetail: JSON.parse(localStorage.getItem('friendDetail')),
      imageDialog: ''
    }
  },
  methods: {
    showImg(headImg) {
      ImagePreview([headImg])
    },
    back() {
      return this.$router.go(-1);
    },
    clickRight() {
      alert('暂未开放')
      // this.$router.push('/')
    },
    communication() {
      this.$router.push({
		    name: "chatWindows",
        params: this.friendDetail
      })
    }
  }
};
</script>

<style scoped>
#friend{
  background-color: #f8f8f8;
}
img{
  border: 1px;
  margin: 5px 0 5px 10px;
  height: 50px;
  width: 50px;
}
.font_size p{
  font-size: 12px;
  margin: 3px;
}
.van-row{
  margin-top: 5px;
  background-color: white;
}
</style>